<template>
    <div class="aggregation-found-statistical">
        <div class="statistical--title">数据统计</div>
        <div class="statistical--content">
            <div v-for="(item, index) in statisticalArr" :key="index" class="statistical--content--item">
                <div class="item--title">
                    <i></i>
                    {{ statisticalTitleArr[index] }}
                </div>
                <div class="total-data">{{ item.totalData }}</div>
                <div :style="{ color: dataColor(item.isGrowth) }" class="item--bottom">
                    <div class="data-size">{{ item.dataSize }}</div>
                    <div class="growth-rate">
                        <i :class="item.isGrowth ? 'up' : 'down'"></i>
                        {{ item.growthRate }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AggregationFoundStatistical",
        data() {
            return {
                statisticalArr: [],
                statisticalTitleArr: [
                    "最近7天数据量",
                    "最近7天中文量",
                    "最近7天外文量",
                    "最近7天新闻数据",
                    "最近7天社交数据"
                ]
            }
        },
        methods: {
            // 底部字体颜色
            dataColor(isGrowth) {
                if (isGrowth) {
                    return "#f00"
                } else {
                    return "#0f0"
                }
            }
        },
        beforeMount() {
            this.statisticalArr = [
                {
                    totalData: 26707,
                    dataSize: 8281,
                    growthRate: "45%",
                    isGrowth: true

                },
                {
                    totalData: 26707,
                    dataSize: 8281,
                    growthRate: "45%",
                    isGrowth: true

                },
                {
                    totalData: 26707,
                    dataSize: 8281,
                    growthRate: "45%",
                    isGrowth: false

                },
                {
                    totalData: 26707,
                    dataSize: 8281,
                    growthRate: "45%",
                    isGrowth: true

                },
                {
                    totalData: 26707,
                        dataSize: 8281,
                    growthRate: "45%",
                    isGrowth: true

                }
            ]
        }
    }
</script>

<style lang="scss" scoped>
    .aggregation-found-statistical {
        .statistical--title {

        }
        .statistical--content {
            display: flex;
            .statistical--content--item {
                padding: 0 5px;
                .item--title {
                    i {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background: #f99;
                    }
                }
                .total-data {

                }
                .item--bottom {
                    display: flex;
                    justify-content: space-between;
                    .growth-rate {
                        i {
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                        }
                        i.up {
                            background: #f00;
                        }
                        i.down {
                            background: #0f0;
                        }
                    }

                }
            }
        }
    }
</style>
